<!--新页面模板-->
<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.roadId" clearable placeholder="选择路线" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" clearable placeholder="选择标段">
        <el-option
          v-for="item in bidSectionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.investigateType" clearable placeholder="排查类型">
        <el-option
          v-for="item in EnumInvestigateTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.dangerLevel" clearable placeholder="隐患等级">
        <el-option
          v-for="item in EnumDangerLevelList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>

    <div class="page_main">
      <div class="change-type">
        <el-radio-group v-model="dataType" @change="queryList">
          <el-radio-button label="slope">公路边坡隐患排查单<span
            style="color: #00de1b;font-size: 16px;font-weight: 600;margin-left: 5px">{{slopeCount}}</span>
          </el-radio-button>
          <el-radio-button label="geology">公路地质灾害隐患排查单<span
            style="color: #00de1b;font-size: 16px;font-weight: 600;margin-left: 5px">{{roadCount}}</span>
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- table -->
      <el-table :data="tableList" border @expand-change="detailRow" :row-key='getRowKeys' :expand-row-keys="expands">
        <el-table-column type="expand" label="展开详情" width="70">
          <template slot-scope="props">
            <slope-detail :currentRow="props.row" :model="1" :isLook="true" v-if="isSlope"></slope-detail>
            <geology-detail :currentRow="props.row" :model="1" :isLook="true" v-else></geology-detail>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column :prop="tdData" min-width="120" show-overflow-tooltip :label="thName"></el-table-column>
        <el-table-column prop="roadName" min-width="120" show-overflow-tooltip label="路线名称"></el-table-column>
        <el-table-column prop="roadSectionName" min-width="120" show-overflow-tooltip label="标段名称"></el-table-column>
        <el-table-column prop="dangerLevelName" min-width="110" sortable label="隐患等级">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.dangerLevelName | gradeDangerColor" class="s-white">
              {{scope.row.dangerLevelName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="investigateTypeName" min-width="100" label="排查类型"></el-table-column>
        <el-table-column prop="unitName" min-width="120" show-overflow-tooltip label="排查单位"></el-table-column>
        <el-table-column prop="userName" min-width="80" show-overflow-tooltip label="排查人"></el-table-column>
        <el-table-column prop="investigateTime" width="180" sortable label="排查时间">
          <template slot-scope="scope">{{scope.row.investigateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="checkStatusName" min-width="100" label="核查状态">
          <template slot-scope="scope">
            <el-tag effect="plain" size="mini" :type="scope.row.checkStatusName | gradeCheckColor">{{
              scope.row.checkStatusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="count" min-width="90" sortable label="次序"></el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleCheck(scope.row)" v-if="(isJianShe && scope.row.checkStatus === 9) || (isJianli && scope.row.checkStatus === 0)">复核</button>
            <button class="btn_edit" @click="handleRecord(scope.row)">操作记录</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <el-dialog title="操作记录"
               :visible.sync="showGeologyRecord"
               :close-on-click-modal="false"
               @open="init"
               :close-on-press-escape="false" width="200px">
      <investigate-operation ref="operation" :id="this.investigateId"></investigate-operation>
    </el-dialog>
    <!-- 复核 -->
    <el-dialog :title="checkTitle"
               :visible.sync="showCheck"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="750px">
      <p class="button-submit">
        <el-popconfirm title="确认提交复核结果吗？" @confirm="submitCheck">
          <el-button slot="reference" size="medium" type="primary">提交复核结果</el-button>
        </el-popconfirm>
      </p>
      <form-check v-model="currentRow" ref="formCheck" :model="checkType"></form-check>
      <slope-detail :key="timer " :currentRow="currentRow" :model="2" v-if="isSlope" :isLook="false"></slope-detail>
      <geology-detail :key="timer " :currentRow="currentRow" :model="2" v-else :isLook="false"></geology-detail>
    </el-dialog>
    <picture-viewer ref="imageViewer"></picture-viewer>

  </div>
</template>
<script>
import PictureViewer from '@/components/picture-viewer/index-name'
import Format from '@/utils/format'
import ItemMixins from "./modules/item.mixins";
import {
  getSlopeInvestigationList,
  getGeologyInvestigationList,
  getInvestigateCheckCount,
  checkSlopeInvestigate,
  checkGeologyInvestigate,
} from '@/services/model/investigation'
import InvestigateOperation from './modules/investigate-operation'
import constUrl from '@/services/env'
import GeologyDetail from "./modules/geology-detail";
import FormCheck from "./modules/form-check";
import SlopeDetail from "./modules/slope-paicha-detail";
import Enums from '@/utils/enums'

export default {
  components: {PictureViewer, InvestigateOperation, GeologyDetail, FormCheck, SlopeDetail},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      timer: '',
      dataType: 'slope',
      showGeologyRecord: false,
      investigateId: '',
      detailDamageActiveName: '',
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      constUrl,
      EnumDangerLevelList: [],
      tableList: [],
      form: {
        page: 1,
        pageSize: 10,
        roadSectionId: ''
      },
      currentRow: {
        damageTypeList: [],
        measuresTypeList: [],
        roadEffectTypeList: [],
        damage: {remark: ''},
        roadEffect: {remark: ''},
      },
      roadCount: 0,
      slopeCount: 0,
      jump: {
        slopeId: '',
        investigateType: ''
      },
      detailActiveName: '',
      EnumInvestigateTypeList: [],
      showCheck: false,
    }
  },
  watch: {
    investigateType(val) {
      this.jump.investigateType = ''
      if (val) {
        this.jump.investigateType = val
      }
    },
    slopeId(val) {
      this.jump.slopeId = ''
      if (val) {
        this.jump.slopeId = val
      }
    },
  },
  computed: {
    checkType() {
      return this.$store.state.userInfo.unitType === 2 ? 'major-jianshe' : 'major-jianli'
    },
    // 建设单位
    isJianShe() {
      return this.$store.state.userInfo.unitType === 2
    },
    // 监理单位
    isJianli() {
      return this.$store.state.userInfo.unitType === 5
    },
    investigateType() {
      return this.$route.params.investigateType
    },
    slopeId() {
      return this.$route.params.slopeId
    },
    thName() {
      if (this.dataType === 'slope') {
        return "边坡名称"
      }
      return "隐患点名称"
    },
    tdData() {
      if (this.dataType === 'slope') {
        return 'slopeName'
      }
      return 'damageName'
    },
    isSlope() {
      return this.dataType === 'slope'
    },
    checkTitle() {
      return this.dataType === 'slope' ? '公路边坡灾害隐患排查复核' : '公路地质灾害隐患排查复核'
    },
  },
  methods: {
    async submitCheck() {
      let action = this.dataType === 'slope' ? checkSlopeInvestigate : checkGeologyInvestigate
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '复核成功'
        })
        this.showCheck = false
        this.getInvestigateCheckCount();
        this.queryList()
      }
    },
    handleCheck(row) {
      this.timer = new Date().getTime()
      this.currentRow = JSON.parse(JSON.stringify(row))
      //重大隐患 建设单位复核通过传3(待整改)，监理单位复核通过传9(监理已复核)
      if(this.currentRow.dangerLevel === 2){
        this.currentRow.checkStatus = this.isJianShe ? 3 : 9
      }else{
        this.currentRow.checkStatus = 2
      }
      this.showCheck = true
    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.investigateId)
      })
    },
    //查看操作记录时间线
    handleRecord(row) {
      this.showGeologyRecord = true
      this.investigateId = row.id
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    // 表格展开时触发
    detailRow(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
      if (row.itemList) {
        this.detailActiveName = row.itemList[0] ? row.itemList[0].name : ''
      }
      if (this.dataType !== 'slope') {
        this.detailDamageActiveName = this.currentRow.damageTypeList[0] + ''
        this.roadEffectActiveName = this.currentRow.roadEffectTypeList[0] + ''
      }

    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    async queryList() {
      let form = JSON.parse(JSON.stringify(this.form))
      // 只查询待复核和监理复核的排查单
      form.checkStatusList = '0,9'
      //根据选择的查询类型，调用不同的查询接口
      let action = this.dataType === 'slope' ? getSlopeInvestigationList : getGeologyInvestigationList
      let res = await action(form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    //查询待复核的数量
    async getInvestigateCheckCount() {
      let {data} = await getInvestigateCheckCount({checkStatus: '0,9'});
      this.roadCount = data.roadCount
      this.slopeCount = data.slopeCount
      if (this.slopeCount === 0) {
        this.dataType = 'geology'
      }
      this.queryList()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
  },
  mounted() {
    this.jump.investigateType = this.$route.params.investigateType
    this.jump.slopeId = this.$route.params.slopeId
    // // 查询单位类型
    this.queryDictList(['EnumDangerLevel', 'EnumInvestigateType'],
      ['EnumDangerLevelList', 'EnumInvestigateTypeList']);
    this.getRoadList();
    this.getInvestigateCheckCount();

  },
  activated() {

  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
      }
      return ''
    },
    gradeCheckColor(val) {
      switch (val) {
        case '复核驳回':
          return 'danger'
        default:
          return ''
      }
    },
    gradeDangerColor(val) {
      switch (val) {
        case '正常':
          return 'background-color:#0DC26B'
        case '一般隐患':
          return 'background-color:#0073b7'
        case '重大隐患':
          return 'background-color:#e43321'
        default:
          return 'background-color:#0DC26B'
      }
    }
  },
}


</script>
<style lang="less">
  .button-submit {
    text-align: right;
    margin-bottom: 5px;
  }

  .el-popconfirm {
    .el-button--text {
      color: red !important;
    }
  }

  .detail-children {
    border-left: 2px;
    border-right: 2px;
    border-style: double;
    border-color: #e4e4e4;
    padding: 20px;

  }

  .detail-children-info {
    background-color: rgb(243 243 243);
    min-height: 220px;
    padding: 10px;
    border-radius: 20px
  }

  .s-white {
    color: #FFFFFF;
  }

  .father-box {
    margin-left: 20px;

    /deep/ .el-checkbox__label {
      width: 140px;
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: 16px;
      margin-top: 6px;
    }

    /deep/ .el-checkbox {
      width: 170px;
      line-height: 38px;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .item-children {
    margin-top: 20px;

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
    }

    /deep/ .el-checkbox__label {
      font-size: 13px;
      line-height: 35px;
    }

    /deep/ .el-checkbox {
      display: block;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #e0e0e0;
      font-size: 16px;
    }
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

  .evaluate {
    /deep/ .el-form-item__label {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
    }
  }

  .page_main {
    /deep/ .el-table__expand-icon {
      font-size: 15px !important;
    }
  }

  .expand-view {
    li {
      font-size: 15px;
      margin-left: 10px;
      line-height: 30px;
      list-style: disc;
    }

    /deep/ .el-card__body {
      padding: 20px;
    }

    /deep/ .el-tabs__item {
      font-size: 15px;
      font-weight: 600;
    }

    .info-title {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }

    .info2 {
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 15px;
      margin-left: 20px;
      color: #fff;
    }
  }

  .page_main {

    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }

  .measures-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
  }

  .change-type {
    margin-bottom: 20px;

    .el-radio-group {
      font-size: 0;
      border-radius: 5px;
      box-shadow: 0 0 5px 3px rgb(43 115 175);
    }
  }

</style>
